<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Plyr 播放本地视频 🎬</title>
    <!-- 引入 Plyr 样式 -->
    <link rel="stylesheet" href="modules/plyr/plyr.css" />
    <style>
        body {
            background-color: #222;
            color: #fff;
            text-align: center;
            font-family: "Microsoft Yahei", sans-serif;
        }

        .player-container {
            max-width: 800px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <h1>🎬 我的本地视频播放器</h1>
    <div class="player-container">
        <!-- 视频标签 -->
        <video id="player" playsinline controls>
            <source src="./tang.mp4" type="video/mp4" />
            您的浏览器不支持 HTML5 视频标签
        </video>
    </div>

    <!-- 引入 Plyr 脚本 -->
    <script src="modules/plyr/plyr.js"></script>
    <script>
        // 初始化 Plyr
        const player = new Plyr('#player', {
            autoplay: false,
            volume: 0.8,
            controls: [
                'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'
            ]
        });
        // 获取播放器 DOM 元素
        const videoElement = document.querySelector('#player');

        // 给视频元素加 tabindex 让它可以被 focus
        videoElement.setAttribute('tabindex', '0');

        // 自动聚焦
        videoElement.focus();
        // 你也可以添加事件监听
        player.on('play', () => {
            console.log('▶️ 视频开始播放！');
        });
    </script>
</body>

</html>
